<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate,
onUpdated, onBeforeUnmount, onUnmounted, ref, reactive
 } from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 import Layout from './layout/index.vue'

const count = ref(0)
const hello = ref(null)

console.log('setup')
onBeforeMount(() => {
  const myP = document.querySelector('p')
  console.log('挂载之前--->onBeforeMount', myP)
})
onMounted(() => {
  const myP = document.querySelector('p')
  console.log('挂载完成--->onMounted', myP)
  console.log(hello.value)
})
onBeforeUpdate(() => {
  console.log('更新之前--->onBeforeUpdate')
})
onUpdated(() => {
  console.log('更新完毕--->onUpdated')
})
// 可以使用v-if来控制组件的销毁
onBeforeUnmount(() => {
  console.log('卸载之前--->onBeforeUnmount')
})
onUnmounted(() => {
  console.log('卸载完成--->onUnmounted')
})

const msg = reactive({
  foo: 1,
  bar: 1
})
</script>
<template>
    <!-- <button @click="count++">{{ count }}</button>
    <HelloWorld :msg="msg" :count="0" ref="hello" /> -->
    <Layout />
</template>

<style lang="less">
html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
